<template>
  <div class="product-detail-main">

    <!-- 1. 进度条 -->
    <el-steps class="step-wrapper" :active="step" finish-status="success">
      <el-step title="步骤 1" />
      <el-step title="步骤 2" />
      <el-step title="步骤 3" />
    </el-steps>
    <div class="form-area">
      <el-card class="card" shadow="never">
        <el-form :model="product">
          <!-- 所有的内容 应该在大的form中划分区域 -->
          <!-- 商品基本信息开始 -->
          <div v-show="step == 1">
            <h1>1.商品基本信息部分</h1>
          </div>

          <!-- 商品sku信息开始 -->
          <div v-show="step == 2">
            <h1>2.商品sku部分</h1>
            <el-form-item label="添加sku" size="normal">
              <p>颜色:</p>
              <!-- tempSkuList 遍历 -->
              <el-checkbox-group v-model="tempSkuAttrSelList">
                <!-- 注意: checkbox 选中后的v-model值 是 label  不是尖括号之间的内容 -->
                <el-checkbox v-for="item in tempSkuAttrList" :key="item.tempId" :style="{color: item.color}" :label="item.tempId">
                  {{ item.color_text }}  <el-button type="text" style="color:red" size="mini" @click="delTempSkuAttr(item.tempId)">删除</el-button>
                </el-checkbox>
              </el-checkbox-group>

              <!-- 动态添加sku -->
              <div class="sku-input-area">
                <el-input v-model="tempSku.color_text" style="width: 200px;" placeholder="请输入颜色描述:比如土豪金" size="mini" />
                <el-color-picker v-model="tempSku.color" style="margin: 0 40px;" size="normal" />
                <el-button type="primary" size="mini" @click="addSkuAttr">创建sku</el-button>
              </div>
              <el-button type="primary" size="mini" @click="buildSkuList">生成sku列表</el-button>

              <!-- sku 列表 -->
              <el-table :data="skuList" border stripe size="mini">
                <el-table-column
                  prop="color_text"
                  label="颜色描述"
                  width="100"
                />
                <el-table-column
                  prop="color"
                  label="色号"
                  width="100"
                />
                <el-table-column
                  label="价格"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.price" placeholder="价格" size="mini" />
                  </template>
                </el-table-column>
                <el-table-column
                  label="sku编码"
                  width="100"
                >
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.sku_code" placeholder="sku编码" size="mini" />
                  </template>
                </el-table-column>
              </el-table>

            </el-form-item>

          </div>

          <!-- 商品补充信息开始 -->
          <div v-show="step == 3">
            <h1>3.商品补充信息部分</h1>
          </div>

        </el-form>
      </el-card>

    </div>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    <el-button type="primary" size="default" @click="test">测试打印$options.data()</el-button>

  </div>
</template>

<script>
import _ from 'lodash'
import { resetData } from '@/utils/index'
export default {
  components: {

  },
  data() {
    return {
      step: 2,
      product: {

      },
      // 临时sku
      tempSku: {
        color_text: ''
      },
      // 临时sku属性集合
      tempSkuAttrList: [],
      // 选中的集合
      tempSkuAttrSelList: [],
      // table需要的对象 sku列表
      skuList: [],
      id: ''
    }
  },
  computed: {

  },
  created() {
    this.id = this.$route.params.id
    console.log(this.id)
  },
  mounted() {

  },
  methods: {
    next() {
      if (++this.step > 3) this.step = 1
    },
    // 添加sku属性
    addSkuAttr() {
      // clone
      var cloneTempSku = _.clone(this.tempSku)
      // 添加临时id
      cloneTempSku.tempId = new Date().getTime()
      this.tempSkuAttrList.push(cloneTempSku)
      // 清除表单
      this.tempSku = {}
    },
    // 删除属性
    delTempSkuAttr(tempId) {
      // 少量数据 可以考虑用过滤器实现
      this.tempSkuAttrList = this.tempSkuAttrList.filter(item => item.tempId !== tempId)
    },
    // 生成sku列表
    buildSkuList() {
      // 从选中的tempSkuAttrList把选中的对象过滤出来
    //   this.skuList = this.tempSkuAttrList.filter(item => this.tempSkuAttrSelList.some(innerItem => innerItem === item.id))
    //   for (var i = 0; i < this.tempSkuAttrSelList.length; i++) {
    //     for (var j = 0; j < this.tempSkuAttrList.length; j++) {
    //       if (this.tempSkuAttrSelList[i] === this.tempSkuAttrList[j].tempId) {
    //         this.skuList.push(this.tempSkuAttrList[j])
    //       }
    //     }
    //   }
      this.skuList = this.tempSkuAttrList
    },
    test() {
      // this.$options.data() 保留了vue初始化的原始数据
      console.log('===>', this.$options.data())
      // 还原
      setTimeout(() => {
        // 搞清楚: 还原和重置是不同的
        // this.form = this.$options.data().form
        resetData(this, 'tempSkuAttrList')
      }, 3000)
    }
  }
}
</script>

<style scoped lang="scss">
    .product-detail-main{
        .step-wrapper{
            width: 900px;
            margin: 30px auto;
        }
        .card{
            margin: 30px;
        }
        .form-area{
            .sku-input-area{
                display: flex;
                align-items: center;
            }
        }
    }
</style>
